<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />--%>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <jsp:include page="/static/commonviews/header.jsp"/>
    <link type="text/css" rel="stylesheet" href="webuploader/webuploader.css"/>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <form id="testForm" name="testForm" enctype="multipart/form-data" method="post" action="/TsFrame/test/subForm"
                  style="width: 400px; margin-top: 10px; border: solid 1px cyan;">
                <div class="form-group form-inline">
                    <label for="txtPwd">密码:</label>
                    <input type="password" name="txtPwd" class="form-control" id="txtPwd" value="111111" placeholder="密码">
                </div>
                <div class="form-group form-inline">
                    <label for="txtRePwd">重复密码:</label>
                    <input type="password" name="txtRePwd" class="form-control" id="txtRePwd" value="111111" placeholder="密码">
                </div>
                <div class="form-group form-inline">
                    <label for="txtFile">文件:</label>
                    <input type="file" name="txtFile" class="form-control" id="txtFile" onchange="fileChange()"/>
                </div>
                <button type="button" id="btnOk" class="btn btn-default">提交</button>
            </form>
        </div>
        <div class="col-md-6">
            <form id="form2" name="form2" enctype="multipart/form-data" method="post"
                  style="width: 500px; margin-top: 10px; border: solid 1px cyan;">
                <div class="form-group form-inline">
                    <label for="txtPwd">字段:</label>
                    <input type="text" name="txtCode" class="form-control" id="txtCode" value="23432" placeholder="代码">
                </div>
                <div class="form-group form-inline">
                    <label for="txtFile2">文件:</label>
                    <input type="file" name="txtFile2"  class="form-control"  id="txtFile2" />
                </div>
                <div id="files_list"></div>
                <button type="button" id="btnOk2" class="btn btn-default">提交</button>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript" src="<%=request.getContextPath()%>/static/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/bootstrap-validator/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/layer/layer.js"></script>
<script type="text/javascript" src="jform/jquery.form.js"></script>
<script type="text/javascript" src="jform/jquery.MultiFile.js"></script>
<script type="text/javascript" src="webuploader/webuploader.js"></script>
<script type="text/javascript">

    //验证文件只能上传图片
    function fileChange() {
        var fileName=$("#txtFile").val();
        var substt =fileName.substring(fileName.lastIndexOf("."),fileName.length);
        substt=substt.toLocaleUpperCase();
        if(substt!=".JPG" && substt!=".JPEG"&& substt!=".PNG"){
            layer.alert("上传文件必须是图片文件!");
            $("#txtFile").val("");
        }

    }
    $(function () {

        //数据验证
        $('#testForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                txtPwd:{
                    message: '密码验证不通过',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        //numeric: {message: '发票金额只能输入数字'},
                        stringLength: {
                            min: 6,
                            max: 8,
                            message: '密码长度必须在6到8之间'
                        },
                        identical: {//相同
                            field: 'txtRePwd', //需要进行比较的input name值
                            message: '两次密码不一致'
                        }
                    }
                },
                txtRePwd:{
                    message: '密码验证不通过',
                    validators: {
                        identical: {//相同
                            field: 'txtPwd', //需要进行比较的input name值
                            message: '两次密码不一致'
                        }
                    }
                }
                ,txtFile:{
                    message: '文件验证不通过',
                    validators: {
                        notEmpty: {
                            message: '文件不能为空'
                        }
                    }
                }
            }
        });

        //单文件上传
        $("#btnOk").click(function (e) {
            //验证表单
            $('#testForm').bootstrapValidator('validate');
            //判断表单是否验证通过
            var flag = $('#testForm').data("bootstrapValidator").isValid();
            if(flag){
                var option={
                    url:'/TsFrame/test/subForm'
                    ,type:'post'
                    ,dataType:'json'
                    ,enctype:'multipart/form-data'
                    ,success:function(data){
                        layer.alert(data.msg);
                        $("#testForm").clearForm();
                    }
                    ,error:function(e){
                        layer.alert(e.statusCode+":"+e.statusText);
                    }
                };

                $("#testForm").ajaxSubmit(option);
                 return false;
               // document.getElementById("testForm").submit();
            }

        });


        //多文件上传
        $('input:file').MultiFile('reset');

        $("#txtFile2").MultiFile({
            accept: '*',//允许文件类型 jpg|png|gif
            max: 5,//最大文件数
            STRING: {
                remove: '移除',//'<img src="/i/bin.gif" height="16" width="16" alt="x"/>'
                selected: '已经选择了: $file',
                denied: '不能选择： $ext !',
                duplicate: '文件重复:\n$file !'
            },
            list: '#files_list',
            afterFileSelect: function (element, value, master_element) {
                element.name = value;
            }

        });
        $("#btnOk2").click(function () {
            var option={
                url:'/TsFrame/test/mutliForm'
                ,type:'post'
                ,dataType:'json'
                ,enctype:'multipart/form-data'
                ,success:function(data){
                    layer.alert(data.msg);
                    $("#form2").clearForm();
                    $("#files_list").empty();
                }
                ,error:function(e){
                    layer.alert(e.statusCode+":"+e.statusText);
                }
            };
            if ($('#files_list').html() == "") {
                layer.alert("请先上传文件再提交!");
                return false;
            }else{
                $("#form2").ajaxSubmit(option);
            }

            return false;
        });

/*

        /!**单个文件上传Demo*!/
        var uploader = WebUploader.create({
            // swf文件路径
            swf: 'webuploader/Uploader.swf',
            // 文件接收服务端。
            server: tsUtils.getRootPath()+'/subForm',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false
            // 只允许选择图片文件。
            ,accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/!*'
            }
        });

        // 当有文件被添加进队列的时候
        uploader.on( 'fileQueued', function( file ) {
            $("#thelist").append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>' );
        });
*/


    });
</script>
</body>
</html>
